<form method="post" action="/_api" class="form-horizontal" target="ifr_form" autocomplete="off">
<input type="hidden" name="do" value="base">
<fieldset>
<legend>api基础信息

<span class="legend_note pull-right">
{{if .api.Exists}}
<a href="/_analysis?name={{.api.Name}}">Http Analysis</a>&nbsp;
{{end}}
pv: &nbsp;<span id="api_pv_{{.api.Name}}">{{.api.GetPv}}</span>&nbsp;
</span>
</legend>

<div class="form-group">
    <label class="col-sm-2 control-label">模块名称:</label>
    <div class="col-sm-3">
        {{if .api.Exists}}
        <input type="hidden" name="api_name" value="{{.api.Name|html}}">
        <input type="hidden" name="mod" value="update">
        <div >{{.api.Name|html}}
         {{if .userCanEdit}}
            <button type="button" class="btn btn-link" data-toggle="modal" data-target="#modifyApiNameModal" data-whatever="{{.api.Name|html}}">修改</button>
         {{end}}
        </div>
        {{else}}
        <input type="hidden" name="mod" value="new">
         <input class="form-control" type="text" required="required" pattern="[\w-]+" name="api_name" value="{{.api.Name|html}}" placeholder="需满足 [\w-]+，全局唯一"> 
        {{end}}
    </div>
</div>

<div class="form-group">
    <label class="col-sm-2 control-label">绑定目录:</label>
    <div class="col-sm-3">
     <input class="form-control" type="text" name="path" value="{{.api.Path}}" pattern="/([\w-]+/)*" placeholder="需满足/([\w-]+/)*">
    </div>
     {{if .api.Exists}}
    <div class="form-control-static"><a href="{{.api_url}}" target="_blank">{{.api_url}}</a></div>
    {{end}}
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">描述:</label>
    <div class="col-sm-8">
     <input class="form-control" type="text" name="note" value="{{.api.Note|html}}">
    </div>
</div>

<div class="form-group">
    <label class="col-sm-2 control-label">超时:</label>
    <div class="col-sm-3">
	    <div class="input-group">
	        <input class="form-control text-right" type="text" name="timeout" value="{{.api.TimeoutMs}}">
	        <div class="input-group-addon">ms</div>
    </div>
    </div>
</div>

<div class="form-group">
    <label class="col-sm-2 control-label">状态:</label>
    <div class="col-sm-3 checkbox">
        <label>
        <input  type="checkbox" name="enable" value="1" {{if .api.Enable}}checked=checked{{end}}>
        启用
        </label>
    </div>
</div>
</fieldset>

<fieldset id="fieldset_hosts">
<legend>后端服务  {{if .userCanEdit}}<a onclick="proxy_api_host_add();return false;" href="#">+</a>{{end}}
&nbsp;
<span class="legend_note">
 <label title="后端当作代理服务器，程序读到的HTTP_HOST将是{{.req_host}}">
      <input  type="checkbox" name="host_as_proxy" value="1" {{if .api.HostAsProxy}}checked=checked{{end}}>
      代理模式
 </label>
 &nbsp;
 </span>
</legend>
 <p class="text-muted">流量会复制到每个后端服务,然后随机选取其中一个Response返回。</p>
 <div id="div_hosts">
{{range $name,$host:=.api.Hosts}}
  <div>
    {{if in_array $name $.cookiePref}}
     <div class="bg-success my-panel" title="该后端已经设置为cookie的默认优先后端了，直接浏览器访问优先返回该主机结果">
    {{end}}
     {%my_include "api/form_base_host_row.html"%}
    {{if in_array $name $.cookiePref}}
    </div>
    {{end}}
  </div>
{{end}}
 </div>
</fieldset>
{{/*}}
<script>
$().ready(function(){
    $("#div_hosts").sortable({
    	update:function(e, ui){
            var index = $(ui.element).children().index(ui.item);
            $(ui.item).find("[name=sort_index]").val(index);
        }    	
    });
});
</script>
{{*/}}
 {%my_include "api/submit.html"%}
</form>

<div class="hidden" id="api_host_tpl">
  {{range $name,$host:=.HostsTpl}}
    {%my_include "api/form_base_host_row.html"%}
  {{end}}
</div>


{{if and .api.Exists .userCanEdit}}
    {%my_include "api/form_rename_modal.html"%}
{{end}}
